<template>
  <div class="i-box" hint="养老金页面">
    <nav-bar class="i-nav" hint="导航栏">
      <div slot="middle">养老金计算</div>
      <img class="top-back-icon" src="@res/img/common_back.png" alt="" slot="left" @click="back">
    </nav-bar>

    <input-item style="margin-top: 1.5rem">
      <p slot="name">本人月工资</p>
      <input class="tit-input" id="monthMoney" name="monthMoney" type="number" slot="input" v-model="monthMoney"
             @input="monthMoney=$_numberUtil.checkPosNumber(monthMoney)">
      <p slot="right">元</p>
    </input-item>

    <input-item>
      <p slot="name">所在城市职工平均工资</p>
      <input class="tit-input" id="avMoney" name="avMoney" type="number" slot="input" v-model="avMoney"
             @input="avMoney=$_numberUtil.checkPosNumber(avMoney)">
      <p slot="right">元</p>
    </input-item>

    <input-item>
      <p slot="name">当前年龄</p>
      <div slot="input" class="tit-input">{{age}}</div>
      <p slot="right" @click="showPicker(0)">岁></p>
    </input-item>

    <input-item>
      <p slot="name">预计退休年龄</p>
      <div slot="input" class="tit-input">{{targetAge}}</div>
      <p slot="right" @click="showPicker(1)">岁></p>
    </input-item>

    <input-item>
      <p slot="name">个人账户累计金额</p>
      <input class="tit-input" id="nowOwn" name="nowOwn" type="number" slot="input" v-model="nowOwn"
             @input="nowOwn=$_numberUtil.checkPosNumber(nowOwn)">
      <p slot="right">元</p>
    </input-item>


    <input-item>
      <p slot="name">本人月工资预计年增长率</p>
      <input class="tit-input" id="monthRate" name="monthRate" type="number" slot="input" v-model="monthRate"
             @input="monthRate=$_numberUtil.checkPosNumber(monthRate)">
      <p slot="right">%</p>
    </input-item>


    <input-item>
      <p  slot="name">职工平均月工资预计年增长率</p>
      <input class="tit-input" id="avRate" name="avRate" type="number" slot="input" v-model="avRate"
             @input="avRate=$_numberUtil.checkPosNumber(avRate)">
      <p slot="right">%</p>
    </input-item>

    <submit-button class="i-submit" @submit="submit" tip="开始计算"></submit-button>

    <div class="i-result" v-show="showResult">
      <div style="margin: 1rem 0px">退休后，每月大约领取如下养老金:</div>
      <div class="i-result-item">个人账户养老金<span class="i-result-num">{{personNum.toFixed(0)}}元</span></div>
      <div class="i-result-item">基础养老金<span class="i-result-num">{{baseNum.toFixed(0)}}元</span></div>
      <div class="i-result-item">总计<span class="i-result-num">{{totalNum.toFixed(0)}}元</span></div>
    </div>

    <div class="gi-text-tip" v-show="showResult">养老金受影响因素很多，以上数据仅供薪资比较稳定的企业人员预测使用!</div>

  </div>
</template>

<script>
  import NavBar from "../common/NavBar";
  import InputItem from "../common/InputItem";
  import SubmitButton from "@/components/common/SubmitButton";

  export default {
    name: "Eldly",
    data() {
      return {
        test: 0,
        monthMoney: 0,//月薪
        avMoney: 0,//职工平均
        age: 0,//年龄
        targetAge: 0,//退休年龄
        nowOwn: 0,//个人账户余额
        monthRate: 0,//预期工资增长率
        avRate: 0,//职工工资增长率,
        ageItems: [],
        targetAgeItems: [],
        curTap: 0,//选择年龄还是退休年龄
        personNum:0,//个人养老-月
        baseNum:0,//基础养老-月
        totalNum:0,//总养老-月,
        showResult:false

      }
    },
    methods: {
      back() {
        this.$router.back()
      },
      showPicker(index) {
        this.curTap = index
        let items = this.ageItems
        if (index !== 0) {
          items = this.targetAgeItems
        }
        let picker = this.$createPicker({
          title: '选择年龄',
          data: [items],
          onSelect: this.selectHandle,
        })
        picker.show()
      },
      selectHandle(selectedVal, selectedIndex, selectedText) {
        if (this.curTap === 0) {
          this.age = selectedVal[0]
        } else {
          this.targetAge = selectedVal[0]
        }
      },
      submit(){

        let monthMoney = parseFloat(this.monthMoney)
        let avMoney = parseFloat(this.avMoney)
        let age = parseFloat(this.age)
        let targetAge = parseFloat(this.targetAge)
        let nowOwn = parseFloat(this.nowOwn)
        let monthRate = parseFloat(this.monthRate)
        let avRate = parseFloat(this.avRate)
        let tip = ''
        if (isNaN(monthMoney) || monthMoney < 1 || monthMoney > 10000000) {
          tip = '月均工资输入有问题，请检查'
        }
        if (isNaN(avMoney) || avMoney < 1 || avMoney > 10000000) {
          tip = '职工月均工资输入有问题，请检查'
        }
        if (isNaN(nowOwn) || nowOwn < 1 || nowOwn > 100000000) {
          tip = '个人账户累计金额输入有问题，请检查'
        }
        if (isNaN(age) || age < 1 || age > 61) {
          tip = '年龄输入有问题，请检查'
        }
        if (isNaN(targetAge) || (targetAge !==50&&targetAge!==55&&targetAge !==60)) {
          tip = '退休年龄输入有问题，请检查'
        }
        if (isNaN(monthRate) || monthRate < 0 || monthRate > 20) {
          tip = '月增长率输入有问题，请检查'
        }
        if (isNaN(avRate) || avRate < 0 || avRate > 20) {
          tip = '月增长率输入有问题，请检查'
        }
        if (tip.length > 1) {
          this.$createToast({
            time: 2000,
            type: 'text',
            txt: tip,
          }).show()
          return
        }
        this.showResult = true
        //剩余缴纳年份
        let restYear = targetAge - age
        if(restYear<0){
          restYear = 0
        }
        //已缴纳年份
        let alreadyYear = Math.round(nowOwn/(monthMoney*12*0.08))+1
        let totalYear = restYear + alreadyYear
        //当年缴纳
        let curYearSum = 0
        //累计个人缴纳
        let totalSum = nowOwn
        //当年月薪
        let newMonthMoney = monthMoney
        //当年职工平均月薪
        let newAvMoney = avMoney
        for(let i=0;i<restYear;i++){
          curYearSum = newMonthMoney * 0.08 *12
          //明年账户余额等于已有余额本息+今年缴纳
          totalSum = totalSum * (1+0.03) + curYearSum
          newMonthMoney = newMonthMoney *(1+monthRate/100)
          newAvMoney  = newAvMoney *(1+avRate/100)
        }
        let oldIndex = monthMoney/avMoney
        let newIndex = (monthMoney*Math.pow((1+monthRate/100),restYear/2))/(avMoney*Math.pow((1+avRate/100),restYear/2))
        //缴费指数
        let index = (oldIndex*alreadyYear + newIndex *restYear)/totalYear
        //计发月数
        let realMonth = this.realMonthCount(targetAge)
        this.personNum = totalSum / realMonth
        this.baseNum =newAvMoney *(1+index)/2*0.01*totalYear
        this.totalNum = this.personNum+this.baseNum
      },
      realMonthCount(p){
        if(p===50){
          return 195
        }
        if(p===55){
          return 170
        }
        if(p===60){
          return 139
        }
        return 200
      }

    }
    ,
    components: {
      NavBar,
      InputItem,
      SubmitButton
    }
    ,
    created() {
      for (let i = 20; i < 61; i++) {
        let text = (i) + '岁'
        this.ageItems.push({
          text: text,
          value: i
        })
      }
      for (let i = 50; i < 61; i += 5) {
        let text = (i) + '岁'
        this.targetAgeItems.push({
          text: text,
          value: i
        })
      }
    }
    ,
  }
</script>

<style scoped>
  .i-box {
  }

  .tit-input {
    text-align: right;
    border: none;
    width: 100%;
  }
  .i-result{
    text-align: left;
    padding: 1rem 2rem;
  }
  .i-result-item{
    font-weight: bold;
    line-height: 3rem;
  }
  .i-result-num{
    font-size: var(--font-title);
    margin-left: 1rem;
    color: red;
  }


</style>
